<template>
  <div class="bg-chart" ref="chart">
  </div>
</template>

<script>
import { random } from '@/util'

export default {
  mounted () {
    this.chart = this.echarts.init(this.$refs.chart)
    this.chart.setOption(this.getOption())
    this.timer = setInterval(() => {
      this.chart.setOption(this.getOption())
    }, 10000)
  },
  destroyed () {
    clearInterval(this.timer)
  },
  data () {
    return {
      timer: null,
      chart: null
    }
  },
  methods: {
    getOption () {
      const graphData = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(item => {
        return {
          name: `Node ${item + 1}`,
          x: random(),
          y: random(),
          itemStyle: [3, 8, 9].indexOf(item) >= 0 ? { color: '#018bff' } : { color: '#d5d8de' }
        }
      })
      const scatterData = graphData.map(item => [item.x, item.y]).slice(0, 6)
      return {
        animationDurationUpdate: 1000,
        grid: {
          top: '0px',
          left: '0px',
          right: '0px',
          bottom: '0px'
        },
        xAxis: {},
        yAxis: {},
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: 40,
            roam: false,
            label: {
              show: false
            },
            edgeSymbol: ['none', 'none'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20
            },
            data: graphData,
            links: [
              { source: 0, target: 1 },
              { source: 0, target: 3, lineStyle: { type: 'dashed' } },
              { source: 0, target: 4, lineStyle: { type: 'solid' } },
              { source: 1, target: 3, lineStyle: { type: 'dashed' } },
              { source: 1, target: 2, lineStyle: { type: 'solid' } },
              { source: 2, target: 3, lineStyle: { type: 'dashed' } },
              { source: 1, target: 2, lineStyle: { type: 'solid' } },
              { source: 3, target: 4, lineStyle: { type: 'dashed' } },
              { source: 5, target: 6, lineStyle: { type: 'dashed' } },
              { source: 5, target: 7, lineStyle: { type: 'dashed' } },
              { source: 5, target: 9, lineStyle: { type: 'dashed' } },
              { source: 6, target: 7, lineStyle: { type: 'solid' } }
            ],
            lineStyle: {
              width: 2,
              curveness: 0
            },
            effect: {
              show: true
            }
          },
          {
            type: 'effectScatter',
            symbolSize: size => (size[0] * size[1] / 3) + 20,
            data: scatterData,
            rippleEffect: {
              brushType: 'stroke'
            }
          }
        ]
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.bg-chart
  width: 100%
  height: 100%
</style>
